<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i>
					订单列表
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div>
				<div class="search box">
					<div>
						姓名：
						<el-input placeholder="客户姓名" clearable v-model="searchName"></el-input>
					</div>
					<div>
						单位：
						<el-input placeholder="单位查询" clearable v-model="searchcompany"></el-input>
					</div>
					<div>
						订单日期:
						<div class="block">
							<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</div>
					</div>
					<div class="btns" style="margin-left: 171px;">
						<el-button type="primary" icon="el-icon-search" @click="seach">查询</el-button>
						<el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
					</div>
				</div>
				<div class="checkline">
					<div class="lacheck">
						用户类型：
						<el-radio v-model="radio1" label="1">全部</el-radio>
						<el-radio v-model="radio1" label="2">合伙人</el-radio>
						<el-radio v-model="radio1" label="3">大客户</el-radio>
					</div>
					<div class="lacheck">
						卡类型：
						<el-radio v-model="radio2" label="1">全部</el-radio>
						<el-radio v-model="radio2" label="2">虚拟卡</el-radio>
						<el-radio v-model="radio2" label="3">实体卡</el-radio>
					</div>
					<div class="btns"><el-button type="primary" icon="el-icon-search" @click="exportToExcel">导出Excel文档</el-button></div>
				</div>
				<div class="list">
					<el-table :data="newTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%" border>
						<el-table-column min-width="150px" prop="order_number" label="订单编号"></el-table-column>
						<el-table-column prop="company" label="单位"></el-table-column>
						<el-table-column prop="name" label="姓名"></el-table-column>
						<el-table-column prop="type" label="客户级别"></el-table-column>
						<el-table-column min-width="200px" prop="create_time" label="创建时间"></el-table-column>
						<el-table-column prop="product_name" label="产品类型"></el-table-column>
						<el-table-column prop="card_type" label="卡类型"></el-table-column>
						<el-table-column prop="order_quantity" label="数量·张"></el-table-column>
						<el-table-column label="单位(元)">100</el-table-column>
						<el-table-column label="金额">
							<template slot-scope="scope">
								{{ newTableData[scope.$index] && newTableData[scope.$index]['order_quantity'] * 100 }}
							</template>
						</el-table-column>
						<el-table-column label="支付状态">
							<template slot-scope="scope">
								{{ newTableData[scope.$index] && newTableData[scope.$index]['pay_status'] == 1 ? '已支付' : '未支付' }}
							</template>
						</el-table-column>
						<el-table-column min-width="120px" label="审核状态">
							<template slot-scope="scope">
								{{ newTableData[scope.$index] && newTableData[scope.$index]['order_status'] == 1 ? '审核未通过' : '未审核' }}
							</template>
						</el-table-column>
						<el-table-column label="配送方式">
							<template slot-scope="scope">
								{{ newTableData[scope.$index] && newTableData[scope.$index]['online'] == 1 ? '线下' : '线上' }}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="block">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[4, 8]"
						:page-size="100"
						layout="total, sizes, prev, pager, next"
						:total="newTableData.length"
					></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'dataStatistics',
	data() {
		return {
			radio1: '1',
			radio2: '1',
			tableData: [],
			newTableData: [],
			currentPage: 1,
			pageSize: 4,
			searchName: '',
			searchcompany: '',
			pickerOptions: {
				shortcuts: [
					{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}
				]
			},
			value1: ''
		};
	},
	watch: {
		radio1(val) {
			this.radio2 = '1';
			let datas = this.tableData;
			if (this.tableData !== []) {
				switch (val) {
					case '1':
						return this.newTableData=datas;
						break;
					case '2':
						this.newTableData = datas.filter(item => item.type === '合伙人');
						break;
					case '3':
						this.newTableData = datas.filter(item => item.type === '大客户');
						break;
					default:
						break;
				}
			}
		},
		radio2(val) {
			this.radio1 = '1';
			let datas = this.tableData;
			if (this.tableData !== []) {
				switch (val) {
					case '1':
						return this.newTableData = datas;
						break;
					case '2':
						this.newTableData = datas.filter(item => item.card_type === '虚拟卡');
						break;
					case '3':
						this.newTableData = datas.filter(item => item.card_type === '实体卡');
						break;
					default:
						break;
				}
			}
		}
	},
	methods: {
		handleSizeChange(val) {
			this.pageSize = val;
		},
		handleCurrentChange(val) {
			this.currentPage = val;
		},
		loadData(url) {
			this.axios
				.post(url, {})
				.then(res => {
					console.log(res)
					this.tableData = res.data.res;
					this.newTableData = this.tableData;
				});
			// this.axios.post(url).then(res => {
			// 	console.log(res)
			// 	this.tableData = res.data.data.res;
			// 	this.newTableData = this.tableData;
			// });
		},
		seach() {
			console.log(this.value1);
			this.axios
				.post('/api/getOrders', {
					name: this.searchName,
					company:this.searchcompany,
				})
				.then(res => {
					console.log(res);
					this.newTableData = res.data.res;
				});
		},
		reset() {
			//重置
			this.searchName = '';
			this.loadData('/api/getOrders');
		},
		exportToExcel() {
			//excel数据导出
			require.ensure([], () => {
				const { export_json_to_excel } = require('../../../assets/js/Export2Excel.js');
				const tHeader = ['订单编号', '单位', '姓名','客户级别','创建时间','产品类型','卡类型','数量·张'];
				const filterVal = ['order_number', 'company', 'name', 'type','create_time','product_name','card_type','order_quantity'];
				const list = this.tableData;
				const data = this.formatJson(filterVal, list);
				export_json_to_excel(tHeader, data, '用户列表');
			});
		},
		formatJson(filterVal, jsonData) {
			return jsonData.map(v => filterVal.map(j => v[j]));
		}
	},
	mounted() {
		this.loadData('/api/getOrders');
	}
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
/*  */
.search {
	padding: 20px 10px;
}

.search > span {
	margin-left: 30px;
}
.box {
	display: flex;
	margin-bottom: 20px;
}
.box > div {
	margin-right: 10px;
}
.box > div > div {
	display: inline-block;
	width: 200px;
}
.checkline {
	padding: 0px 40px;
}

.checkline::after {
	content: '';
	display: block;
	clear: both;
}

.checkline > div {
	display: inline-block;
}

.lacheck {
	display: inline-block;
	margin-left: 30px;
}

.btns {
	float: right;
}

.list {
	margin-top: 10px;
}

.block {
	display: flex;
	justify-content: center;
}

.as {
	width: 90%;
	margin-bottom: 10px;
	text-align: right;
}
</style>
